<template>
  <el-dialog v-model="visible" width="24%" :before-close="handleClose" custom-class="custom-dialog">
    <Login @close="handleClose" />
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import Login from './Login.vue';

const visible = ref(true);

const handleClose = () => {
  visible.value = false;
};
</script>

<style scoped>
.custom-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.el-dialog {
  width: 30%;
  max-width: 400px; /* 设置最大宽度以适应不同屏幕 */
  min-width: 300px; /* 设置最小宽度以适应不同屏幕 */
  margin: 0 auto; /* 水平居中 */
}

.el-dialog__body {
  padding: 20px;
}
</style>